<template>
  <div>
    <el-tabs type="border-card">
      <el-tab-pane label="待付款">
        <el-table
          :data="grdfsujv"
          style="width: 100%">
          <el-table-column type="expand" label="详情">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="图片">
                  <img :src="props.row.null3" alt="">
                </el-form-item>
                <el-form-item label="描述">
                  <span v-html="props.row.null1"></span>
                </el-form-item>
                <el-form-item label="名称">
                  <span v-html="props.row.null2"></span>
                </el-form-item>
                <el-form-item label="产品编码">
                  <span v-html="props.row.null4"></span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column
            label="订单号">
            <template slot-scope="scope">
              <span>{{ scope.row.orderNo }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="名称">
            <template slot-scope="scope">
              <span>{{ scope.row.companyName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="日期">
            <template slot-scope="scope">
              <span>{{ scope.row.orderTime }}</span>
            </template>
          </el-table-column>

          <el-table-column
            label="交易操作">
            <template slot-scope="scope">
              <el-button size="mini" type="success" @click="lijizhifu(scope.$index, scope.row)">
                {{ scope.row.dealOperation}}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[5, 10, 15]"
          :page-size="currentPage4"
          layout="total, sizes, prev, pager, next, jumper"
          :total="zpage">
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label='待发货'>
        <el-table
          :data="grdf2sujv"
          style="width: 100%">
          <el-table-column type="expand" label="详情">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="图片">
                  <img :src="props.row.null3" alt="">
                </el-form-item>
                <el-form-item label="描述">
                  <span v-html="props.row.null1"></span>
                </el-form-item>
                <el-form-item label="名称">
                  <span v-html="props.row.null2"></span>
                </el-form-item>
                <el-form-item label="产品编码">
                  <span v-html="props.row.null4"></span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column
            label="订单号">
            <template slot-scope="scope">
              <span>{{ scope.row.orderNo }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="名称">
            <template slot-scope="scope">
              <span>{{ scope.row.companyName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="日期">
            <template slot-scope="scope">
              <span>{{ scope.row.orderTime }}</span>
            </template>
          </el-table-column>

          <el-table-column
            label="交易操作"
            prop="dealOperation">
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange2"
          @current-change="handleCurrentChange2"
          :current-page="page"
          :page-sizes="[5, 10, 15]"
          :page-size="currentPage4"
          layout="total, sizes, prev, pager, next, jumper"
          :total="zpage2">
        </el-pagination>
      </el-tab-pane>

      <el-tab-pane label='待收货'>
        <el-table
          :data="grdf3sujv"
          style="width: 100%">
          <el-table-column type="expand" label="详情">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="图片">
                  <img :src="props.row.null3" alt="">
                </el-form-item>
                <el-form-item label="描述">
                  <span v-html="props.row.null1"></span>
                </el-form-item>
                <el-form-item label="名称">
                  <span v-html="props.row.null2"></span>
                </el-form-item>
                <el-form-item label="产品编码">
                  <span v-html="props.row.null4"></span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column
            label="订单号">
            <template slot-scope="scope">
              <span>{{ scope.row.orderNo }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="名称">
            <template slot-scope="scope">
              <span>{{ scope.row.companyName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="日期">
            <template slot-scope="scope">
              <span>{{ scope.row.orderTime }}</span>
            </template>
          </el-table-column>

          <el-table-column
            label="交易操作">
            <template slot-scope="scope">
              <el-button size="mini" type="success" @click="querenshouhuo(scope.$index, scope.row)">
                {{ scope.row.dealOperation}}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange3"
          @current-change="handleCurrentChange3"
          :current-page="page"
          :page-sizes="[5, 10, 15]"
          :page-size="currentPage4"
          layout="total, sizes, prev, pager, next, jumper"
          :total="zpage3">
        </el-pagination>
      </el-tab-pane>

      <el-tab-pane label='已收货'>
        <el-table
          :data="grdf4sujv"
          style="width: 100%">
          <el-table-column type="expand" label="详情">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="图片">
                  <img :src="props.row.null3" alt="">
                </el-form-item>
                <el-form-item label="描述">
                  <span v-html="props.row.null1"></span>
                </el-form-item>
                <el-form-item label="名称">
                  <span v-html="props.row.null2"></span>
                </el-form-item>
                <el-form-item label="产品编码">
                  <span v-html="props.row.null4"></span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column
            label="订单号">
            <template slot-scope="scope">
              <span>{{ scope.row.orderNo }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="名称">
            <template slot-scope="scope">
              <span>{{ scope.row.companyName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="日期">
            <template slot-scope="scope">
              <span>{{ scope.row.orderTime }}</span>
            </template>
          </el-table-column>

          <el-table-column
            label="交易操作">
            <template>
              已收货
            </template>
          </el-table-column>

        </el-table>

        <el-pagination
          @size-change="handleSizeChange4"
          @current-change="handleCurrentChange4"
          :current-page="page"
          :page-sizes="[5, 10, 15]"
          :page-size="currentPage4"
          layout="total, sizes, prev, pager, next, jumper"
          :total="zpage4">
        </el-pagination>
      </el-tab-pane>

    </el-tabs>

  </div>
</template>

<script>
export default {
  name: 'wddd',
  data () {
    return {
      dealerId: 1,
      currentPage4: 5,
      page: 1,
      dindan: [],
      grdfsujv: [],
      grdf2sujv: [],
      grdf3sujv: [],
      grdf4sujv: [],
      grdf4sujv2: [],
      zpage: 0,
      zpage2: 0,
      zpage3: 0,
      zpage4: 0,
      sousuosujv: '',
      sousuosujv2: '',
      sousuosujv3: '',
      sousuosujv4: '',
      dialogVisible: false,
      textarea3: ''

    }
  },
  methods: {
    sousuo () {
      var that = this
      this.$axios.post('order/orderSearchByNo', {
        page: this.page,
        limit: this.currentPage4,
        dealStatus: '待付款',
        dealerId: this.dealerId,
        orderNo: this.sousuosujv
      }).then(function (res) {
        window.console.log(res)
        that.grdfsujv = res.data.data
        that.zpage = Math.ceil(res.data.count)
      })
    },
    sousuo2 () {
      var that = this
      this.$axios.post('order/orderSearchByNo', {
        page: this.page,
        limit: this.currentPage4,
        dealStatus: '待发货',
        dealerId: this.dealerId,
        orderNo: this.sousuosujv2
      }).then(function (res) {
        window.console.log(res)
        that.grdf2sujv = res.data.data
        that.zpage2 = Math.ceil(res.data.count)
      })
    },
    sousuo3 () {
      var that = this
      this.$axios.post('order/orderSearchByNo', {
        page: this.page,
        limit: this.currentPage4,
        dealStatus: '待收货',
        dealerId: this.dealerId,
        orderNo: this.sousuosujv3
      }).then(function (res) {
        window.console.log(res)
        that.grdf3sujv = res.data.data
        that.zpage3 = Math.ceil(res.data.count)
      })
    },
    sousuo4 () {
      var that = this
      this.$axios.post('order/orderSearchByNo', {
        page: this.page,
        limit: this.currentPage4,
        dealStatus: '待收货',
        dealerId: this.dealerId,
        orderNo: this.sousuosujv4
      }).then(function (res) {
        window.console.log(res)
        that.grdf4sujv = res.data.data
        that.zpage4 = Math.ceil(res.data.count)
      })
    },
    lijizhifu (index, row) {
      window.console.log(row)
      this.$router.push({
        path: '/createOrder',
        query: {
          item: this.grdfsujv[index].productInfo
        }
      })
    },
    querenshouhuo (index, row) {
      window.console.log(index, row)
    },
    qinqiu () {
      var that = this
      this.$axios.post('order/queryOrder', {
        dealerId: this.dealerId,
        page: this.page,
        limit: this.currentPage4,
        dealStatus: '待付款'
      }).then(function (res) {
        that.grdfsujv = res.data.data
        that.zpage = Math.ceil(res.data.count)
        for (var i = 0; i < that.grdfsujv.length; i++) {
          that.grdfsujv[i].orderTime = that.formatDate(new Date(that.grdfsujv[i].orderTime))
          for (var j = 0; j < that.grdfsujv[i].productInfo.length; j++) {
            that.grdfsujv[i].null1 += that.grdfsujv[i].productInfo[j].productDescribe + '<br/>'
            that.grdfsujv[i].null2 += that.grdfsujv[i].productInfo[j].productName + '<br/>'
            that.grdfsujv[i].null3 += that.grdfsujv[i].productInfo[j].imageUrl + '<br/>'
            that.grdfsujv[i].null4 += that.grdfsujv[i].productInfo[j].orderNo + '<br/>'
          }
        }
      })
    },
    qinqiu2 () {
      var that = this
      this.$axios.post('order/queryOrder', {
        dealerId: this.dealerId,
        page: this.page,
        limit: this.currentPage4,
        dealStatus: '待发货'
      }).then(function (res) {
        that.grdf2sujv = res.data.data
        that.zpage2 = Math.ceil(res.data.count)
        window.console.log(that.grdf2sujv)
        for (var i = 0; i < that.grdf2sujv.length; i++) {
          that.grdf2sujv[i].orderTime = that.formatDate(new Date(that.grdf2sujv[i].orderTime))
          for (var j = 0; j < that.grdf2sujv[i].productInfo.length; j++) {
            that.grdf2sujv[i].null1 += that.grdf2sujv[i].productInfo[j].productDescribe + '<br/>'
            that.grdf2sujv[i].null2 += that.grdf2sujv[i].productInfo[j].productName + '<br/>'
            that.grdf2sujv[i].null3 += that.grdf2sujv[i].productInfo[j].imageUrl + '<br/>'
            that.grdf2sujv[i].null4 += that.grdf2sujv[i].productInfo[j].orderNo + '<br/>'
          }
        }
      })
    },
    qinqiu3 () {
      var that = this
      this.$axios.post('order/queryOrder', {
        dealerId: this.dealerId,
        page: this.page,
        limit: this.currentPage4,
        dealStatus: '待收货'
      }).then(function (res) {
        that.grdf3sujv = res.data.data
        that.zpage3 = Math.ceil(res.data.count)
        for (var i = 0; i < that.grdf3sujv.length; i++) {
          that.grdf3sujv[i].orderTime = that.formatDate(new Date(that.grdf3sujv[i].orderTime))
          for (var j = 0; j < that.grdf3sujv[i].productInfo.length; j++) {
            that.grdf3sujv[i].null1 += that.grdf3sujv[i].productInfo[j].productDescribe + '<br/>'
            that.grdf3sujv[i].null2 += that.grdf3sujv[i].productInfo[j].productName + '<br/>'
            that.grdf3sujv[i].null3 += that.grdf3sujv[i].productInfo[j].imageUrl + '<br/>'
            that.grdf3sujv[i].null4 += that.grdf3sujv[i].productInfo[j].orderNo + '<br/>'
          }
        }
      })
    },
    qinqiu4 () {
      var that = this
      this.$axios.post('order/queryOrder', {
        dealerId: this.dealerId,
        page: this.page,
        limit: this.currentPage4,
        dealStatus: '已收货'
      }).then(function (res) {
        window.console.log(res)
        that.grdf4sujv = res.data.data
        that.zpage4 = Math.ceil(res.data.count)
        for (var i = 0; i < that.grdf4sujv.length; i++) {
          that.grdf4sujv[i].orderTime = that.formatDate(new Date(that.grdf4sujv[i].orderTime))
          for (var j = 0; j < that.grdf4sujv[i].productInfo.length; j++) {
            that.grdf4sujv[i].null1 += that.grdf4sujv[i].productInfo[j].productDescribe + '<br/>'
            that.grdf4sujv[i].null2 += that.grdf4sujv[i].productInfo[j].productName + '<br/>'
            that.grdf4sujv[i].null3 += that.grdf4sujv[i].productInfo[j].imageUrl + '<br/>'
            that.grdf4sujv[i].null4 += that.grdf4sujv[i].productInfo[j].orderNo + '<br/>'
            that.grdf4sujv2.push(that.grdf4sujv[i].productInfo[j])
          }
        }
        window.console.log(that.grdf4sujv2)
      })
    },
    handleSizeChange (newsize) {
      this.currentPage4 = newsize
      var that = this
      that.$axios.post('order/queryOrder', {
        dealerId: that.dealerId,
        page: that.page,
        limit: that.currentPage4,
        dealStatus: '待付款'

      }).then(function (res) {
        that.grdfsujv = res.data.data
        that.zpage = Math.ceil(res.data.count)
        for (var i = 0; i < that.grdfsujv.length; i++) {
          that.grdfsujv[i].orderTime = that.formatDate(new Date(that.grdfsujv[i].orderTime))
        }
      })
    },
    handleSizeChange2 (newsize) {
      this.currentPage4 = newsize
      var that = this
      that.$axios.post('order/queryOrder', {
        dealerId: that.dealerId,
        page: that.page,
        limit: that.currentPage4,
        dealStatus: '待发货'
      }).then(function (res) {
        // window.console.log(res)
        that.grdf2sujv = res.data.data
        that.zpage2 = Math.ceil(res.data.count)
        for (var i = 0; i < that.grdf2sujv.length; i++) {
          that.grdf2sujv[i].orderTime = that.formatDate(new Date(that.grdf2sujv[i].orderTime))
        }
      })
    },
    handleSizeChange3 (newsize) {
      window.console.log(newsize)
      this.currentPage4 = newsize
      var that = this
      that.$axios.post('order/queryOrder', {
        dealerId: that.dealerId,
        page: that.page,
        limit: that.currentPage4,
        dealStatus: '待收货'
      }).then(function (res) {
        // window.console.log(res)
        that.grdf3sujv = res.data.data
        that.zpage3 = Math.ceil(res.data.count)
        for (var i = 0; i < that.grdf3sujv.length; i++) {
          that.grdf3sujv[i].orderTime = that.formatDate(new Date(that.grdf3sujv[i].orderTime))
        }
      })
    },
    handleSizeChange4 (newsize) {
      window.console.log(newsize)
      this.currentPage4 = newsize
      var that = this
      that.$axios.post('order/queryOrder', {
        dealerId: that.dealerId,
        page: that.page,
        limit: that.currentPage4,
        dealStatus: '已收货'
      }).then(function (res) {
        // window.console.log(res)
        that.grdf4sujv = res.data.data
        that.zpage4 = Math.ceil(res.data.count)
        for (var i = 0; i < that.grdf4sujv.length; i++) {
          that.grdf4sujv[i].orderTime = that.formatDate(new Date(that.grdf4sujv[i].orderTime))
        }
      })
    },
    handleCurrentChange (newpage) {
      var that = this
      window.console.log(newpage)
      this.page = newpage
      this.$axios.post('order/queryOrder', {
        dealerId: that.dealerId,
        page: that.page,
        limit: that.currentPage4,
        dealStatus: '待付款'
      }).then(function (res) {
        window.console.log(that.grdfsujv)
        that.grdfsujv = res.data.data
        that.zpage = Math.ceil(res.data.count)
        for (var i = 0; i < that.grdfsujv.length; i++) {
          that.grdfsujv[i].orderTime = that.formatDate(new Date(that.grdfsujv[i].orderTime))
        }
        // 总共有多少条
      })
    },
    handleCurrentChange2 (newpage) {
      var that = this
      window.console.log(newpage)
      this.page = newpage
      window.console.log(this.currentPage4)
      this.$axios.post('order/queryOrder', {
        dealerId: that.dealerId,
        page: that.page,
        limit: that.currentPage4,
        dealStatus: '待发货'
      }).then(function (res) {
        // window.console.log(res)
        that.grdf2sujv = res.data.data // 数据
        that.zpage2 = res.data.count
        for (var i = 0; i < that.grdf2sujv.length; i++) {
          that.grdf2sujv[i].orderTime = that.formatDate(new Date(that.grdf2sujv[i].orderTime))
        }
        // 总共有多少条
      })
    },
    handleCurrentChange3 (newpage) {
      var that = this
      window.console.log(newpage)
      this.page = newpage
      window.console.log(this.currentPage4)
      this.$axios.post('order/queryOrder', {
        dealerId: that.dealerId,
        page: that.page,
        limit: that.currentPage4,
        dealStatus: '待收货'
      }).then(function (res) {
        // window.console.log(res)
        that.grdf3sujv = res.data.data // 数据
        that.zpage3 = res.data.count// 总共有多少条
        for (var i = 0; i < that.grdf3sujv.length; i++) {
          that.grdf3sujv[i].orderTime = that.formatDate(new Date(that.grdf3sujv[i].orderTime))
        }
      })
    },
    handleCurrentChange4 (newpage) {
      var that = this
      window.console.log(newpage)
      this.page = newpage
      window.console.log(this.currentPage4)
      this.$axios.post('order/queryOrder', {
        dealerId: that.dealerId,
        page: that.page,
        limit: that.currentPage4,
        dealStatus: '待收货'
      }).then(function (res) {
        // window.console.log(res)
        that.grdf4sujv = res.data.data // 数据
        that.zpage4 = res.data.count
        for (var i = 0; i < that.grdf4sujv.length; i++) {
          that.grdf4sujv[i].orderTime = that.formatDate(new Date(that.grdf4sujv[i].orderTime))
        }
        // 总共有多少条
      })
    },
    open4 (index, row) {
      this.dialogVisible = true
      window.console.log(index, row)
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(() => {
          done()
        })
        .catch(() => {})
    }

  },
  created: function () {
    window.console.log(this.dealerId)
    this.qinqiu()
    this.qinqiu2()
    this.qinqiu3()
    this.qinqiu4()
  }
}
</script>
<style>
  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
